<template>
	<!-- 搜索栏 -->
	<div class="topBox">
		<div class="L">
			<a href="index.html">
				<img src="/assets/images/logo1.jpg" />
			</a>
		</div>
		<div class="C">
			<div class="saerchbox">
				<router-link to="/product/product/index">
					<input name type="text" placeholder="请输入您要搜索的内容" />
					<img src="/assets/images/ss.png" />
				</router-link>
			</div>
		</div>
		<div class="R">
			<img src="/assets/images/tr.png" @click="showPopup = true" />
		</div>
		<!-- 分类弹出层 -->
		<div>
			<van-popup v-model:show="showPopup" position="right">
				<div class="typelist">
					<router-link
						:to="{ path: '/product/product/index', query: { typeid: item.id } }"
						v-for="(item, index) in typeList"
						:key="index"
					>
						{{ item.name }}
					</router-link>
				</div>
			</van-popup>
		</div>
	</div>
	<div class="clear"></div>
	<!-- 轮播 -->
	<div class="aui-m-slider">
		<div class="m-slider" data-ydui-slider>
			<van-swipe class="my-swipe" :autoplay="2000">
				<van-swipe-item v-for="item in recommendList" :key="item.id">
					<div class="slider-item">
						<a href="javascript:;">
							<img :src="item.cover_cdn" />
						</a>
					</div>
				</van-swipe-item>
			</van-swipe>
		</div>
	</div>
	<div class="clear"></div>
	<!-- 分类 -->
	<div class="lqgwBox">
		<ul>
			<li v-for="(item, index) in typeList" :key="index">
				<router-link :to="{ path: '/product/product/index', query: { typeid: item.id } }">
					<img :src="item.cover_cdn" />
					<p>{{ item.name }}</p>
				</router-link>
			</li>
		</ul>
	</div>
	<div class="clear"></div>

	<div class="contitbox">
		<p>
			新品
			<span>·</span>推荐
		</p>
	</div>
	<div class="clear"></div>
	<!-- 新品推荐 -->
	<ul class="proul">
		<li v-for="item in newList" :key="item.id">
			<div class="con">
				<router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
					<img :src="item.cover_cdn" />
					<p><span>￥</span>{{ item.price }}</p>
				</router-link>
			</div>
		</li>
	</ul>
	<div class="clear"></div>
	<div class="adBox">
		<img src="/assets/images/banner.jpg" />
	</div>
	<div class="clear"></div>
	<div class="contitbox">
		<p>
			热销
			<span>·</span>单品
		</p>
	</div>
	<div class="clear"></div>
	<!-- 热销单品 -->
	<ul class="proul_2">
		<li v-for="item in HotList" :key="item.id">
			<div class="con">
				<router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
					<img :src="item.cover_cdn" />
					<p><span>￥</span>{{ item.price }}</p>
				</router-link>
			</div>
		</li>
	</ul>
	<div class="clear"></div>
	<div class="h54"></div>
	<div class="clear"></div>
</template>
<script>
	export default {
		emits: ['toggle'],
		// 传值给到父组件
		created() {
			this.$emit('toggle', true);
			this.homeData();
		},
		data() {
			return {
				// 展示分类弹窗
				showPopup: false,
				typeList: [],
				HotList: [],
				newList: [],
				recommendList: [],
			};
		},
		methods: {
			async homeData() {
				var result = await this.$api.productIndex();

				if (result.code == '1') {
					let data = result.data;
					this.typeList = data.typeList;
					this.HotList = data.HotList;
					this.newList = data.newList;
					this.recommendList = data.recommendList;
				}
			},
		},
	};
</script>
<style scoped>
	.typelist {
		width: 10rem;
		height: 42rem;
	}

	.typelist a {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		line-height: 3em;
		border-bottom: 1px solid #ccc;
	}
</style>
